<template>
	<div class="table-data">
		<ve-table :data="tableData" :table-row-class-name="tableRowClassName">
			<el-table-column type="index" label="序号" :index="(index)=>{return index+1}" />
			<el-table-column prop="name" label="标签名称" width="150">
				<template slot-scope="scope">
					<span class="names" v-if="scope.row.labelType == 'S'">{{ scope.row.name }}</span>
					<span
						class="fixed"
						v-if="scope.row.labelType == 'S'"
					>{{ scope.row.labelType|veDict('labelType') }}</span>
					<span v-else>{{ scope.row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="availableState" label="状态" width="50">
				<template slot-scope="scope">{{ scope.row.availableState|veDict('availableState') }}</template>
			</el-table-column>
			<el-table-column prop="labelProperty" label="属性" width="50">
				<template slot-scope="scope">{{ scope.row.labelProperty|veDict('labelProperty') }}</template>
			</el-table-column>
			<el-table-column prop="isRequired" label="是否必填" width="80">
				<template slot-scope="scope">{{ scope.row.isRequired|veDict('isRequired') }}</template>
			</el-table-column>
			<el-table-column prop="labelDetailNames" label="标签值" />
			<el-table-column prop="projectNames" label="所属项目" />
			<el-table-column prop="applyScope" label="应用范围" />
			<el-table-column prop="createTime" label="创建时间" />
			<el-table-column prop="createUserName" label="创建人" width="80" />
			<el-table-column prop="updateTime" label="修改时间" />
			<el-table-column prop="updateUserName" label="修改人" width="80" />
			<el-table-column label="操作" width="210px" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" @click="onViewDetail(scope.row.id)">查看</el-button>
					<el-button
						type="text"
						v-if="scope.row.availableState == 'Y'"
						@click="onEditDetail(scope.row.id)"
						v-show="scope.row.labelType == 'C'"
						v-permiss-code="'rc/tag/list-edit'"
					>
						编辑
					</el-button>
					<el-button
						type="text"
						v-if="scope.row.availableState == 'N'"
						v-show="scope.row.labelType == 'C'"
						@click="open(scope.row,scope.$index)"
						v-permiss-code="'rc/tag/list-update'"
					>
						启用
					</el-button>
					<el-button
						type="text"
						v-if="scope.row.availableState == 'Y'"
						v-show="scope.row.labelType == 'C'"
						@click="prohibit(scope.row,scope.$index)"
						v-permiss-code="'rc/tag/list-update'"
					>
						禁用
					</el-button>
				</template>
			</el-table-column>
		</ve-table>
		<!-- 分页 -->
		<ve-pagination :get-page="getPage" :page.sync="page" />
	</div>
</template>

<script>
	import ApiTag from "../../../../apis/rc/tag.mjs";
	export default {
		name: "tableData",
		props: {
			//表单数据
			tableData: {
				type: Array,
				default: () => []
			},
			page: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				itemIndex: 0
				//分页信息
				// page: {
				// 	pageIndex: 1,
				// 	pageSize: 10,
				// 	pageCount: 0
				// }
			};
		},
		methods: {
			//查看详情
			onViewDetail(id) {
				this.$emit("on-view-detail", id);
			},
			//编辑信息
			onEditDetail(id) {
				nlapp.PageUtil.navigateToOnly("/rc/tag/edit", { id });
			},
			//分页
			getPage() {
				this.$emit("changes-list-page", this.page);
			},
			//启用标签
			open(row, index) {
				this.itemIndex = index;
				let params = {};
				params.id = row.id;
				params.availableState = "Y";
				ApiTag.onStartOrHidden({
					data: params,
					success: (res) => {
						if (res) {
							this.$message({ message: "启用成功", type: "success" });
							this.$emit("open-change-item-state", this.itemIndex);
						}
					},
					complete: () => {}
				});
			},
			//禁用标签
			prohibit(row, index) {
				this.itemIndex = index;
				let params = {};
				params.id = row.id;
				ApiTag.checkTag({
					data: params,
					success: (res) => {
						if (res) {
							this.$confirm("已有资源使用该标签，标签禁用后，资源下该标签信息将同步隐藏不显示，确定禁用吗？", {
								confirmButtonText: "确定",
								cancelButtonText: "取消"
							})
								.then(() => {
									params.availableState = "N";
									this.onAction(params);
								})
								.catch(() => {
									return;
								});
						} else {
							this.$confirm("当前暂无资源使用该标签，禁用后所有资源将无法标记该标签，确定禁用吗？", {
								confirmButtonText: "确定",
								cancelButtonText: "取消"
							})
								.then(() => {
									params.availableState = "N";
									this.onAction(params);
								})
								.catch(() => {
									return;
								});
						}
					},
					complete: () => {}
				});
			},
			//确定禁用
			onAction(params) {
				ApiTag.onStartOrHidden({
					data: params,
					success: (res) => {
						if (res) {
							this.$message({ message: "禁用成功", type: "success" });
							this.$emit("change-item-state", this.itemIndex);
						}
					},
					complete: () => {}
				});
			},
			tableRowClassName({ row, rowIndex }) {
				if (row.availableState == "N") {
					console.log("置灰");
					return "warning-row";
				} else if (rowIndex % 2) {
					return "row-color";
				}
				return;
			}
		}
	};
</script>

<style lang="less" scoped>
	.el-message-box__header {
		display: none;
	}
	.bg-color {
		background-color: crimson;
	}
	.el-table {
		.el-table_1_column_2 {
			position: relative;
		}
		/deep/.cell {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			// height: 23px;

			span {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.names {
				position: absolute;
				bottom: 2px;
				display: inline-block;
				left: 50%;
				transform: translateX(-50%);
			}
			.fixed {
				position: absolute;
				top: 0px;
				left: 50%;
				display: inline-block;
				height: 20px;
				width: 74px;
				line-height: 20px;
				padding: 1px 10px 1px 0px;
				color: #fff;
				background-image: url("../../../../assets/images/bgco.png");
				background-repeat: no-repeat;
			}
		}
		/deep/.row-color {
			background-color: #f5f5f5;
		}
		/deep/.warning-row {
			color: gray;
			span {
				color: gray;
			}
			.cell {
				color: gray;
			}
			div {
				color: gray;
			}
		}
	}
	.has-gutter {
		tr {
			.el-table_1_column_3 {
				width: 40px;
				background-color: red;
			}
		}
	}
</style>